<template>
  <div class="score-main">
    <div class="title">
      <div class="" style="padding-left:10px;">
        智慧小区评分-小区选择
      </div>
      <div class="circle">
        <ul>
          <li><span style="visibility: hidden;">1</span></li>
          <li><span style="visibility: hidden;">1</span></li>
          <li><span style="visibility: hidden;">1</span></li>
        </ul>
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="ranking">
          图标{{item.id}}
        </div>
        <div class="address">
          {{item.name}}
        </div>
        <div class="progress">
          <div :class="classList[item.id-1]">

          </div>
          <div class="number">{{item.number}}</div>
          <!-- <div class="one"></div>
          <div class="two"></div>
          <div class="three"></div>
          <div class="four"></div>
          <div class="five"></div> -->
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "亿达小区",
          number: 135,
          id: 1
        },
        {
          name: "亿达小区",
          number: 120,
          id: 2
        },
        {
          name: "亿达小区",
          number: 100,
          id: 3
        },
        {
          name: "亿达小区",
          number: 80,
          id: 4
        },
        {
          name: "亿达小区",
          number: 70,
          id: 5
        }
      ],
      classList: ["one","two","three","four","five"]
    }
  }
}
</script>

<style lang="scss">
$yellow:yellow;
  .score-main {
    color: yellow;
    .title {
      display: flex;
      justify-content: space-between;
      .circle {
        ul {
          padding: 0px;
          margin: 0px;
          display: flex;
          color: $yellow;
          li {
            list-style-type: disc;
          }
        }
      }
    }
    .list {
      .item {
        display: flex;
        .ranking,.address,.progress,.result {
          box-sizing: border-box;
          padding: 10px;
        }

        .progress {
          width: 70%;
          display: flex;
          align-items: center;
          .number {
            margin-left: 15px;
          }
        }
        .one {
          width: 80%;
          height: 10px;
          border-radius: 5px ;
          background-color: red;
        }
        .two {
          width: 70%;
          height: 10px;
          border-radius: 5px ;
          background-color: orange;
        }
        .three {
          width: 60%;
          height: 10px;
          border-radius: 5px ;
          background-color: rgb(230, 230, 32);
        }
        .four {
          width: 50%;
          height: 10px;
          border-radius: 5px ;
          background-color: blue;
        }
        .five {
          width: 40%;
          height: 10px;
          border-radius: 5px ;
          background-color: skyblue;
        }
      }
    }
  }
</style>